import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import RegisterItem from '../../Common/RegisterLoginItem/RegisterLoginItem.jsx';
//import Using ES6 syntax
import WeUI from 'react-weui';

//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/Register.css';
const {Dialog, Toptips} = WeUI;
//校验密码：只能输入6-20个字母、数字、下划线
function isPasswd(s)
{
    var patrn=/^(\w){6,20}$/;
    if (!patrn.exec(s)) return false
    return true
}
export default class NewSetPassword extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.FinishSet = this.FinishSet.bind(this);
        this.Hide = this.Hide.bind(this);
    }

    componentWillMount() { //组件即将被插入
        this.state = {
            data: {
                title: "忘记密码",
                describe: "重设密码",
                inputName1: "设置密码",
                inputName2: "再次输入密码",
                messagesCodeTitle: "",
                forgetPassword: "",
                buttonTitle: "完成",
                type: "password",
                phoneNumType: "password",
            },
            showAuto: false,
            msg: "密码修改成功",
            style: {
                buttons: [
                    {
                        label: '好的',
                        onClick: this.Hide
                    }
                ]
            },
        };
        this.state.warnTimer && clearTimeout(this.state.warnTimer);
    }

    LeftClick() {
    }

    // showWarn(text) {
    //     this.setState({showWarn: true, tipText: text});
    //
    //     this.state.warnTimer = setTimeout(()=> {
    //         this.setState({showWarn: false});
    //     }, 2000);
    // }
    setPassword(phoneNum, password) {
        // let self=this;

    }

    FinishSet(password1, password2) {//完成修改
        let phoneNum = this.props.location.query.phoneNum;
        console.log(phoneNum);
        console.log("密码", password1);
        console.log("密码", password2);
        //重置密码
        let msg = "";
        if (password1 == "" || password2 == "") {
            msg = "密码信息未输入完整";
            this.setState({msg: msg, showAuto: true});
        } else if (!isPasswd(password1) || !isPasswd(password2)) {
            msg = "密码格式错误，只能输入6-20个字母、数字、下划线";
            this.setState({msg: msg, showAuto: true});
        } else if (password1 != password2) {
            msg = "两次输入的密码不一致";
            this.setState({msg: msg, showAuto: true});
        } else {
            let fromData = new FormData();
            fromData.append("mobile", phoneNum)
            fromData.append("password", password1)
            fetch(getHost() + "/user/password/reset", {
                method: 'POST',
                credentials: 'include',
                body: fromData
            }).then(response => response.json()).then(json => {
                if (json.success) {
                    msg = "密码修改成功";
                    this.setState({msg: msg, showAuto: true});
                    console.log(json)
                } else {
                    msg = "密码修改失败,请重试";
                    this.setState({msg: msg, showAuto: true});
                    console.log(json)
                }
            }).catch(e => {
                console.log("网络出现了点问题：" + e);
                msg = "网络出现了点问题,请稍后再试";
                this.setState({msg: msg, showAuto: true});
            });

        }
    }

    Hide() {
        this.setState({showAuto: false});
        if (this.state.msg == "密码修改成功") {
            location.hash = "/Login";
        }
    }

    render() {
        return (
            <div>
                <NavigationBar Title="忘记密码" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <RegisterItem data={this.state.data} callbackParent={this.FinishSet}/>
                {/*<Toptips type="warn" show={this.state.showWarn}>{this.state.tipText}</Toptips>*/}
                <Dialog title={this.state.style.title} buttons={this.state.style.buttons} show={this.state.showAuto}>
                    {this.state.msg}
                </Dialog>
            </div>
        )
    }
}
